﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
    <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">

    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <title>Tiles :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style</title>

    <link href="css/metro.css" rel="stylesheet">
    <link href="css/metro-icons.css" rel="stylesheet">
    <link href="css/metro-responsive.css" rel="stylesheet">
    <link href="css/metro-schemes.css" rel="stylesheet">


    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/metro.js"></script>


</head>
<body>
	
	<div class="tile"  data-role="title">  <!--定义一个磁贴-->
		<div class="tile-content iconic"><!--设置磁贴的内容-->
			<icon /> 
		</div>
	</div>

	<div class="tile">
		<div class="tile-content">
			<span class="tile-label">Label</span> <!--设置磁贴的标题-->
			<span class="tile-badge">5</span> <!--设置磁贴下方的字数-->
		</div>
	</div>

	<div class="tile">
		<div class="tile-content image-set">  <!--定义一组图片-->
			<img src="images/1.jpg">
			<img src="images/1.jpg">
			<img src="images/1.jpg">
			<img src="images/1.jpg">
			<img src="images/1.jpg">
		</div>
	</div>

	

	<div class="tile">
		<div class="tile-content">
			<img src="images/1.jpg" data-role="fitImage" data-format="square"> <!--正常图片大小，自动裁剪-->
		</div>
	</div>

	<div class="tile">
		<div class="tile-content">
			<div class="carousel" data-role="carousel"> <!--带有旋转的样式的磁贴-->
				<div class="slide"><a href="http:www.baidu.com"><img src="images/1.jpg"></a></div>
				<div class="slide"><img src="images/1.jpg"></div>
			</div>
		</div>
	</div>

	<div class="tile element-selected"> <!--选中样式的磁贴-->
		12321321
	</div>

	<div class="tile">
		<div class="tile-content slide-up"> <!--定义内容是由上向下滑动的-->
			<div class="slide"> <!--触发焦点时向上滑动-->
				... Main slide content ...
			</div>
			<div class="slide-over"> <!--触发焦点时由下向上滑动覆盖内容-->
				... Over slide content here ...
			</div>
		</div>
	</div>

	<div class="tile">
		<div class="tile-content slide-down"> <!--定义内容是由下向上滑动的-->
			<div class="slide"><!--触发焦点时向上滑动-->
				... Main slide content ...
			</div>
			<div class="slide-over"> <!--触发焦点时由上向下滑动覆盖内容-->
				... Over slide content here ...
			</div>
		</div>
	</div>

	
	<div class="tile">
		<div class="tile-content slide-left"><!--定义内容是由左向右滑动的-->
			<div class="slide">
				... Main slide content ...
			</div>
			<div class="slide-over">
				... Over slide content here ...
			</div>
		</div>
	</div>


	<div class="tile">
		<div class="tile-content slide-right"> <!--定义内容是由右向左滑动的-->
			<div class="slide">
				... Main slide content ...
			</div>
			<div class="slide-over">
				... Over slide content here ...
			</div>
		</div>
	</div>

	<div class="tile">
		<div class="tile-content zooming">  <!--定义内容放大的-->
			<div class="slide">
				... Slide content here ...
			</div>
		</div>
	</div>

	<div class="tile">
		<div class="tile-content zooming-out"> <!--定义内容缩小的-->
			<div class="slide">
				... Slide content here ...
			</div>
		</div>
	</div>

	<div class="tile-wide" data-role="tile" data-effect="slideUpDown"> <!--定义内容是滑动的 上下滑动 类似滚动效果-->
		<div class="tile-content">
			<div class="live-slide">...slide content...</div>
			...
			<div class="live-slide">...slide content2...</div>
		</div>
	</div>


	<div class="tile bg-amber" data-role="title"> 
		<div class="tile-content iconic"> <!--定义内容是由ICon填充的-->
			<a href="http://www.baidu.com"> <span class="icon mif-video-camera"> <!--填充ICon样式--></span></a> 
		</div>
		<div class="tile-label">aaaa</div>
	</div>

</body>
</html>